<template>
  <div class="pretty-input-box">
    <h3>{{ title }}</h3>
    <input
      class="user-input"
      :placeholder="placeholder"
      v-on:blur="$emit('blur', $event)"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "PrettyInput",
  props: {
    title: {
      type: String,
      default: "用户管理", // 不要在子组件中直接修改props，而是用事件向父组件传递
    },
  },
  data() {
    return {
      placeholder: "请输入用户名",
    };
  },
};
</script>

<style scoped>
.pretty-input-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-input {
  padding: 5px 10px;
  border: 1px solid #efefef;
  background-color: cyan;
  border-radius: 6px;
  margin-right: 10px;
  color: white;
}
</style>
